HTML TAGS

  • STEPS
    remember that every HTML element is enclosed by an open tag and a closing tag. And the content goes inside them. Let’s see the image to understand.


    1- html tag

    This tag is the most basic HTML tag. Without this tag, our HTML code will not work correctly. All HTML documents will begin with open tag and end with close tag.

    
<html>
 
</html>

    2- head tag

    you will add a head tag which will also always use after the HTML tag when you start your HTML document. As given below:

    
<html>
   <head>
 
   </head>
 
</html>

    3- Title Tag

    Now, in the head tag, we use the title tag. Similar to the other three tags, this will always use in between head tags. And in the title tag, we write our webpage title.

    
<html>
 <head>
   <title> my webpage  </title>
 </head>
 
</html>

    4- body tag

    Then, after the head and title tag, we use our most basic tag the body tag. In this tag, we write all our content. So, the body tag uses to display all webpage content. There is only one body tag in HTML.

    
<html>
 <head>
   <title> my webpage  </title>
 </head>
<body>
 
</body>
</html>

    5 -heading tags (h1 to h6)

    Now we will use heading tags. There are six types of headings.
    h1 is the biggest heading.
    h3 is smaller than h2.
    h4 is smaller than h3.
    h5 is smaller than h5.
    h6 is the smallest heading 

    
<html>
    <head>  
       <title> my webpage  </title>   
    </head>
<body>
     <h1> heading 1 </h1>
     <h2> heading 2 </h2>
     <h3> heading 3 </h3>
     <h4> heading 4 </h4>
     <h5> heading 5 </h5>
     <h6> heading 6 </h6>
</body>
</html>

    6- p or paragraphs tags

    Now, we will use a p tag mean a paragraph tag, p tag uses to write paragraphs in an HTML webpage.

    
<html>
    <head>  <title> my webpage  </title>   </head>
<body>
     <h1> heading 1 </h1>
     <h2> heading 2 </h2>
     <h3> heading 3 </h3>
     <h4> heading 4 </h4>
     <h5> heading 5 </h5>
     <h6> heading 6 </h6>
     <p> this is a paragraph tag </p>
</body>
</html>

    7- a tag or hyperlink tag

    Furthermore, tags are used for adding links in HTML. We use href attribute in an open tag and give that attribute a site URL.

    
<a href="https://www.twitter.com"> Twitter </a>

    8- imag tag

    So this tag is used for adding images to a webpage. This tag has no closing tag. In tag, we give it an src attribute and give it a value of image file location.

    
<img src="images/filename.jpg>

    9- br tag or Line Break

    this is a line break tag. We use this tag to break a line. And this tag has no closing tag.

    
<br>

    10. hr - horizontal rule

    It inserts horizontal rule.

    
<h1>Heading</h1>
<hr />
<p>I am paragraph</p>

    11. Lists

    1. ul tag

    This tag is used to define unordered list.

    
 <ul> … </ul>
    2. li tag

    It is used to define list item.

    
  <li> … </li>
    Usage 
    
<ul>
    <li>List_Item_1</li>
    <li>List_Item_2</li>
    <li>List_Item_3</li>
    <li>List_Item_4</li>
</ul>

    12. Tables

    1. table tag

    It defines an HTML table.

    
 <table> … </table>
    2. tr tag

    It is used to define a row in a table.

    
 <tr> … </tr>
    3. th tag

    It is used to define header cell in a table.

    
 <th> … </th>
    4. td tag

    It is used to write data in a table cell.

    
 <td> … </td>
    Usage 
    
<table> 
    
    <tr>
        <th>Table_Header_1</th>
        <th> Table_Header_2</th>
    </tr>
    <tr>
        <td>Table_Data_1</td>
        <td> Table_Data_2 </td>
    </tr>
</table>

    13. Forms

    1. form tag

    It defines an HTML form.

    
<form> … </form>
    2. input tag

    It specifies an input field where the user can enter data.

    
<input />
    3. label tag

    It defines a label for input element.

    
 <label> … </label>
    4. button tag

    It defines a clickable button.

    
  <button> … </button>
    5. textarea tag

    It defines multiline input text area.

    
 <textarea> … </textarea>
    6. select tag

    It defines a drop-down list.

    
 <select> … </select>
    Usage 
    
<form>
        <label>First Name:</label>
        <input type="text"><br><br>

 	<label>Gender :</label>
        <select>
            <option>Male</option>
            <option>Female</option>
        </select><br><br>

	<label>Address :</label>
        <textarea> </textarea><br><br>

	<input type="submit" value="Submit">
</form>

    14. Layouts

    1. div tag

    It defines a division or a section in an HTML page. It is used as a container for HTML elements.

    
 <div> … </div>
    2. header tag

    It is used to define header for a document.

    
<header> … </header>
    3. main tag

    It is used to define main content for a document

    
<main> … </main>
    4. footer tag

    It is used to define footer for a document.

    
<footer> … </footer>
    5. section tag

    It defines a section in a document.

    
<section> … </section>
    6. aside tag

    It is used to define side content like sidebar in a document.

    
<aside> … </aside>
    7. nav tag

    It defines navigation links.

    
<nav> … </nav>
    Usage 
    
<body>
  <header>
    <nav>
        <ul>
            <li>Menu_Item_1</li>
            <li>Menu_item_2</li>
        </ul>
    </nav>
  </header>
   
  <aside>
    <p>Sidebar</p>
  </aside>
 
  <main>
    <section>
        <h1>Main Content</h1>
        <p>Paragarpgh-1</p>
    </section>
  </main>
 
  <footer>
    <p>Copywright @ 2021</p>
  </footer>
</body>

    HTML tags sheet